<template>
    <Modal v-model="show" title="修改" @on-ok="ok" :loading="loading">
        <Form ref="treeForm" :model="treeForm" :rules="treeFormRule">
            <FormItem label="父菜单名字" prop="parentTreeName">
                <Input type="text" :maxlength=50 v-model="treeForm.parentTreeName" disabled >
                </Input>
            </FormItem>
            <FormItem label="菜单名字" prop="name">
                <Input type="text" :maxlength=50 v-model="treeForm.name" placeholder="请输入菜单名字"  >
                </Input>
            </FormItem>
            <FormItem label="菜单编码" prop="code">
                <Input type="text" :maxlength=50 v-model="treeForm.code" placeholder="请输入菜单编码" >
                </Input>
            </FormItem>
            <FormItem label="菜单地址" prop="url">
                <Input type="text" :maxlength=50 v-model="treeForm.url" placeholder="请输入菜单地址" >
                </Input>
            </FormItem>
        </Form>
    </Modal>
</template>
<script>
    import {isExist,updateTree,getTree} from '../../../api/sys/tree/tree-api';
    export default {
        name: 'updateTree',
        props: {
            value: {
                type: Boolean,
                default: false
            },
            treeId:{
                type:String
            }
        },
        data() {
            return {
                treeForm:{
                    treeId:'0',
                    parentTreeId:'0',
                    parentTreeName:'顶层节点',
                    name:'',
                    url:'',
                    code:'',
                    type:'1'
                },
                treeFormRule:{
                    name:[
                        {required: true, message: '请输入菜单名字', trigger: 'blur'},
                        {type: 'string', max: 50, message: '菜单名字允许输入最大长度为50个字符', trigger: 'blur'}
                    ],
                    url:[
                        {required: true, message: '请输入菜单地址', trigger: 'blur'},
                        {type: 'string', max: 50, message: '菜单地址允许输入最大长度为50个字符', trigger: 'blur'}
                    ],
                    code:[
                        {required: true, message: '请输入菜单编码', trigger: 'blur'},
                        {type: 'string', max: 50, message: '菜单编码允许输入最大长度为50个字符', trigger: 'blur'},
                        {validator:this.checkTree(), trigger: 'blur'}
                    ]
                },
                show: this.value,
                loading: true
            };
        },
        watch: {
            value(val) {
                this.show = val;
            },
            show(val) {
                //当重新显示增加数据的时候重置整个form表单
                if(val){
                    this.$refs['treeForm'].resetFields();
                    let treeId = this.treeId;
                    getTree({treeId:treeId}).then(res=>{
                        if(res.result){
                            this.treeForm = res.entity;
                        }else{
                            this.$Message.success(res.msg);
                            this.closeModal(false);
                        }
                    });
                }else{// 反之则关闭页面
                    this.closeModal(val);
                }
            }
        },
        methods:{
            checkTree(){
                return function (rule, value, callback) {
                    let code = value;
                    let treeId = this.treeId;
                    isExist({code,treeId}).then(res => {
                        if (res.result) {
                            callback();
                        } else {
                            callback(new Error(res.msg));
                        }
                    });
                };
            },
            closeModal(val) {
                this.$emit('input', val);
            },
            ok(){
                this.$refs['treeForm'].validate((valid) => {
                    if (valid) {
                        updateTree(this.treeForm).then(res => {
                            if(res.result){
                                this.$Message.success(res.msg);
                                // 提交表单数据成功则关闭当前的modal框
                                this.closeModal(false);
                                // 同时调用父页面的刷新页面的方法
                                this.$emit('reloadTree');
                            }else{
                                this.$Message.err(res.msg);
                            }
                        });
                    }else{
                        this.$Message.error('表单验证失败，请检查表单!');
                    }
                    setTimeout(() => {
                        this.loading = false;
                        this.$nextTick(() => {
                            this.loading = true;
                        });
                    },1000);
                });
            }
        }
    };
</script>